import React from 'react';
import {Button, Col, Form, Input, Row} from "antd";
import {LockOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
import {NavLink, useNavigate} from "react-router-dom";
import {register, sendRegisterCode} from "../../util/api/SystemApi";

const RegisterForm = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const onFinish = (values) => {
    register(values).then(() => {
      navigate("/login");
    })
  };
  const sendCode = () => {
    let email = form.getFieldValue("email");
    if (email) {
      sendRegisterCode({
        "email": email
      })
    }
  }
  return (
    <div
      style={{
        width: "400px",
        height: "500px",
        position: "absolute",
        margin: "auto",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: "rgb(255,255,255)",
        borderRadius: "10px",
      }}>
      <div
        style={{
          width: "350px",
          height: "420px",
          position: "absolute",
          margin: "auto",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}>
        <h1><b>注册</b></h1>
        <Form
          form={form}
          name={"register"}
          onFinish={onFinish}
        >
          <Form.Item
            name={"userName"}
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
              {
                whitespace: true,
                message: "不得有空格!"
              },
              {
                pattern: /^[a-zA-Z0-9_-]{4,16}$/,
                message: "用户名由字母、数组、下划线、减号组成，4-16位!"
              }
            ]}
          >
            <Input prefix={<UserOutlined/>} placeholder={"用户名"}/>
          </Form.Item>
          <Form.Item
            name={"password"}
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
              {
                whitespace: true,
                message: "不得有空格!"
              },
              {
                pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
                message: "密码最少6位，至少含有大小写字母、数字和特殊字符!"
              }
            ]}
          >
            <Input
              prefix={<LockOutlined/>}
              type={"password"}
              placeholder={"密码"}
              autoComplete={"on"}
            />
          </Form.Item>
          <Form.Item
            name={"confirm"}
            rules={[
              {
                required: true,
                message: "请再次输入密码!",
              },
              ({getFieldValue}) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("你输入的两个密码不匹配！"));
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined/>}
              type={"password"}
              placeholder={"确定密码"}
              autoComplete={"on"}
            />
          </Form.Item>
          <Form.Item
            name={"email"}
            rules={[
              {
                required: true,
                message: "请输入电子邮箱！"
              },
              {
                pattern: /[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/,
                message: "邮箱格式不正确！"
              }
            ]}
          >
            <Input
              prefix={<MailOutlined/>}
              type={"email"}
              placeholder={"电子邮件"}
            />
          </Form.Item>
          <Form.Item
            name={"verificationCode"}
            rules={[
              {
                required: true,
                message: "请输入验证码!"
              },
              {
                pattern: /^[0-9]{6}$/,
                message: "验证码为6位数字!"
              }
            ]}
          >
            <Row gutter={20}>
              <Col span={16}>
                <Input placeholder={"验证码"}/>
              </Col>
              <Col span={8}>
                <Button
                  type={"primary"}
                  onClick={sendCode}
                >发送验证码</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              type={"primary"}
              htmlType={"submit"}
              style={{
                width: "350px"
              }}>
              注册
            </Button>
            <div style={{
              height: "50px",
              margin: "15px 0"
            }}>
              已有账号？<NavLink to={"/login"}>去登录</NavLink>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default RegisterForm;